<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix='fmt' %>
<link rel="stylesheet" href="/static/adminlte/bower_components/bootstrap/dist/css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="/static/adminlte/bower_components/font-awesome/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="/static/adminlte/bower_components/Ionicons/css/ionicons.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="/static/adminlte/dist/css/AdminLTE.min.css">
<link rel="stylesheet" href="/static/adminlte/dist/css/skins/_all-skins.min.css">
<link rel="stylesheet" href="/css/listdata.css">
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
<c:set var="title" value="数据管理"/>
<%@include file="common/adminHeader.jsp" %>
<c:set var="light" value="3"/>
<%@include file="../../pages/common/header.jsp" %>
<%@include file="../../pages/common/mune.jsp"%>
<%--<%@include file="common/adminNavigator.jsp" %>--%>

<body class="hold-transition skin-green sidebar-mini" style="background-color:#F0F2F5">
<div class="container" style="margin-left: 250px;">
    <%--todo:界面插在这里--%>
    <div class="whole" style="margin-top: 24px;">
        <div class="divwhite" style="background-color: white">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="subheader countkind countxiao">总销售额</div>
                    </div>
                    <div class="h1 mb-3">¥5000</div>
                    <div class="d-flex mb-2">
                        <div class="ms-auto" style="vertical-align:middle;">
                            <span class="text-green d-inline-flex align-items-center lh-1">日同比 7%</span>

                                <!-- Download SVG icon from http://tabler-icons.io/i/trending-up -->
                            <img style="width: 10px;height: 10px" src="/img/up.png">

                        </div>
                    </div>
                    <span class="d-inline-flex align-items-center lh-1" style="position: absolute;top: 230px;font-size: 14px;">日销售额 ¥5000</span>

                </div>
            </div>
        </div>
        <div class="divwhite" style="background-color: white">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="subheader countkind countxiao">总类数</div>
                    </div>
                    <div class="h1 mb-3">3</div>
                    <div class="d-flex mb-2">
                        <div class="ms-auto" style="vertical-align:middle;">
                            <span class="d-inline-flex align-items-center lh-1" style="font-size: 16px;">总商品数 20</span>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div class="divwhite" style="background-color: white">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="subheader countkind countxiao">订单数</div>
                    </div>
                    <div class="h1 mb-3">120</div>
                    <div id="main" style="margin-left: -36px;width: 300px;height:50px;">
                    </div>

                </div>
            </div>
        </div>
        <div class="divwhite" style="background-color: white">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="subheader countkind countxiao">访问量</div>
                    </div>
                    <div class="h1 mb-3">100</div>
                    <div id="main2" style="margin-left: -26px;width: 300px;height:110px;margin-top: -38px;">
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-6" style="background-color: white;left: 30px;top: 24px;font-size: 30px;width:1210px;height: 420px;">
            <div class="row row-cards">
                    <div class="card">
                        <div class="card-body" style="position: relative;">
                            <h3 class="card-title" style="color:#22A7FF;font-size:18px;margin-left:14px;width: 1210px;">销售额</h3>
                        </div>
                        <div id="main3" style="float:left;margin-left: -30px;margin-top: -20px;width: 1000px;height:400px;">
                        </div>
                        <div style="background-color: white;float:left;width: 200px;height: 300px;margin-top: 40px;">
                            <ul style="font-size: 16px">销售商品排名</ul>
                            <li style="list-style-image: url('/img/first.png');font-size: 16px;padding: 5px;">阿克苏苹果</li>
                            <li style="list-style-image: url('/img/second.png');font-size: 16px;padding: 5px;">吐鲁番葡萄</li>
                            <li style="list-style-image: url('/img/third.png');font-size: 16px;padding: 5px;">伊犁香妃海棠果</li>
                            <li style="list-style-image: url('/img/rank.png');font-size: 16px;padding: 5px;">新疆木瓜</li>
                            <li style="list-style-image: url('/img/rank.png');font-size: 16px;padding: 5px;">新疆车厘子</li>
                            <li style="list-style-image: url('/img/rank.png');font-size: 16px;padding: 5px;">天山雪梨</li>
                            <li style="list-style-image: url('/img/rank.png');font-size: 16px;padding: 5px;">库尔勒香梨</li>
                        </div>
                    </div>
            </div>
        </div>
        <div class="col-lg-6" style="background-color: white;left: 30px;top: 24px;font-size: 30px;width:594px;height: 420px;margin-top: 25px">
            <div class="row row-cards">
                <div class="card">
                    <div class="card-body" style="position: relative;">
                        <h3 class="card-title" style="color:#333333;font-size:18px;margin-left:14px;width: 1210px;">销售类别占比</h3>
                    </div>
                    <div id="main4" style="float:left;margin-left: -200px;margin-top: -20px;width: 1000px;height:400px;">
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-6" style="background-color: white;margin-left: 20px;left: 30px;top: 24px;font-size: 30px;width:594px;height: 420px;margin-top: 25px">
            <div class="row row-cards">
                <div class="card">
                    <div class="card-body" style="position: relative;">
                        <h3 class="card-title" style="color:#333333;font-size:18px;margin-left:14px;width: 1210px;">线上热搜</h3>
                    </div>
                    <div id="main5" style="float:left;margin-left: -30px;margin-top: -20px;width: 1000px;height:400px;">
                        <img src="/img/resou.png" style="margin-top: 30px;vertical-align: middle;width: 594px;margin-left: 30px;">
                        <table class="table table-condensed" style="margin-top: 10px;margin-left: 50px;width: 550px;">
                            <thead>
                            <tr>
                                <th>排名</th>
                                <th>搜索关键词</th>
                                <th>用户数</th></tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>1</td>
                                <td>哈密瓜</td>
                                <td>60</td></tr>
                            <tr>
                                <td>2</td>
                                <td>红枣</td>
                                <td>42</td></tr>
                            <tr>
                                <td>3</td>
                                <td>蓝莓</td>
                                <td>35</td></tr>
                            <tr>
                                <td>4</td>
                                <td>核桃</td>
                                <td>30</td></tr>
                            <tr>
                                <td>5</td>
                                <td>梨</td>
                                <td>24</td></tr>
                            </tbody>
                        </table>
                    </div>
<%--                    <div style="margin-top:160px;margin-left:0px;background-color:white;width: 595px;height:220px;">--%>

<%--                    </div>--%>
                </div>
            </div>
        </div>
    </div>
    </body>

    </html>




</div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    var myChart2 = echarts.init(document.getElementById('main2'));
    var myChart3 = echarts.init(document.getElementById('main3'));
    var myChart4 = echarts.init(document.getElementById('main4'));
    // 指定蓝色柱状图的配置项和数据
    var option = {
        color: ['#6395F9'],
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            show: false
        },
        yAxis: {
            type: 'value',
            show: false
        },
        series: [
            {
                data: [120, 200, 150, 80, 70, 110, 130],
                type: 'bar',
                barWidth: '50%',
            }
        ]
    };
    //指定绿色折线图的配置
    var option2 = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                lineStyle: {
                    width: 3,
                    color: '#019688',
                },
            },
        },
        grid: {
            left: '4%',
            right: '3%',
            bottom: '3%',
            containLabel: true,
        },
        color: ['#019688', '#119AC2'],
        xAxis: [
            {
                show: false,
                type: 'category',
                boundaryGap: false,
                data: ['2022-10-01 12:00:00', '2022-10-01 13:00:00', '2022-10-01 14:00:00', '2022-10-01 15:00:00',
                    '2022-10-01 16:00:00', '2022-10-01 17:00:00', '2022-10-01 18:00:00', '2022-10-01 19:00:00',
                    '2022-10-01 20:00:00', '2022-10-01 21:00:00', '2022-10-01 22:00:00', '2022-10-01 23:00:00'],
                // axisLabel: {
                //   rotate: 25,
                // },
                splitLine: {
                    show: true,
                    lineStyle: {
                        width: 1,
                        type: 'solid',
                        color: 'rgba(226,226,226,0.5)',
                    },
                },
                axisTick: { // 轴刻度线
                    show: false,
                },
            },
        ],
        yAxis: [
            {
                show: false,
                type: 'value',
                name: '浓度数据',
                max: 0.5,
                interval: 0.1,
                axisTick: { // 轴刻度线
                    show: false,
                },
                // 刻度文字颜色
                axisLabel: { color: '#808080' },
                // y轴刻度设置
                axisLine: {
                    lineStyle: {
                        width: 2,
                        color: '#019688',
                    },
                },
                // y轴分隔线设置
                splitLine: {
                    lineStyle: {
                        color: 'rgba(226,226,226,0.5)',
                    },
                },
                // y轴分隔区域设置
                splitArea: {
                    show: true,
                    areaStyle: {
                        color: ['rgba(250,250,250,0.3)', 'rgba(226,226,226,0.3)'],
                    },
                },
            },
            {
                show: false,
                type: 'value',
                name: '测量原始值',
                min: 0,
                max: 60,
                interval: 2,
                axisTick: { // 轴刻度线
                    show: false,
                },
                axisLabel: { color: '#808080' },
                axisLine: {
                    lineStyle: {
                        width: 2,
                        color: '#019688',
                    },
                },
                // y轴分隔线设置
                splitLine: {
                    lineStyle: {
                        color: 'rgba(226,226,226,0.5)',
                    },
                },
                splitArea: {
                    show: true,
                    areaStyle: {
                        color: ['rgba(250,250,250,0.3)', 'rgba(226,226,226,0.3)'],
                    },
                },
            },
        ],
        series: [

            {
                name: '测量原始值',
                type: 'line',
                yAxisIndex: 1,
                data: [50, 39, 42, 30, 60, 48, 56, 42, 12, 4, 30,23],
                smooth: true,
                symbolSize: 6,
                areaStyle: {},
                itemStyle: {
                    borderWidth: 2,
                },
            },
        ],
    };
    //指定蓝色销售额的配置
    var option3 = {
        color:['#6395F9'],
        xAxis: {
            type: 'category',
            data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: [325, 420, 738,704,520,320,150,350, 390, 500, 630,420],
                type: 'bar',
                barWidth: '50%',
            }
        ]
    };
    // 指定饼状图
    var option4 = {
        series: [
            {
                itemStyle: {
                    normal: {
                        color: function (colors) {
                            var colorList = ['#5470c6', '#3BA272','#91cd77','#ef6567','#f9c956','#75bedc'];
                            return colorList[colors.dataIndex];
                        }
                    },
                },
                name: 'Access From',
                type: 'pie',
                radius: '50%',
                data: [
                    { value: 1048, name: '阿克苏苹果' },
                    { value: 735, name: '吐鲁番葡萄' },
                    { value: 580, name: '伊犁香妃海棠果' },
                    { value: 484, name: '新疆木瓜' },
                    { value: 300, name: '新疆车厘子' },
                    { value: 300, name: '其他' },
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    myChart2.setOption(option2);
    myChart3.setOption(option3);
    myChart4.setOption(option4);
</script>
</body>
<%--<%@include file="common/adminPage.jsp" %>--%>

<%@include file="common/adminFooter.jsp" %>

<!-- jQuery 3 -->
<script src="/static/adminlte/bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="/static/adminlte/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- AdminLTE App -->
<script src="/static/adminlte/dist/js/adminlte.min.js"></script>